<template>
  <!-- 表单填写 -->
    <view class="xinguan-view">
      <view class="xinguan-flex">
        <text>姓名</text>
        <input placeholder="请输入姓名" v-model="penging_data.name" placeholder-class="input-style" />
      </view>
      <view class="xinguan-flex">
        <text>身份证</text>
        <input placeholder="请输入身份证" v-model="penging_data.id_card" placeholder-class="input-style" />
      </view>
      <view class="xinguan-flex">
        <text>手机号</text>
        <input placeholder="请输入手机号" v-model="penging_data.phone" type="number" placeholder-class="input-style" />
      </view>
      <view class="xinguan-flex">
        <text>现居地址</text>
        <picker mode="region" class="flex-left" @change="changeRegion">
          <view>
            <text>{{penging_data.address == "" ? "请选择现居地址" : penging_data.address}}</text>
            <image src="/static/other/gengduo.svg"></image>
          </view>
        </picker>
      </view>
      <view class="xinguan-flex">
        <text>现居详细地址</text>
        <input placeholder="请输入现居详细地址" v-model="penging_data.de_address" placeholder-class="input-style" />
      </view>
      <view class="xinguan-flex">
        <text>疫苗人群分类</text>
        <picker mode="selector" class="flex-left" :range="selector_data" @change="changeSelector">
          <view>
            <text>{{penging_data.crowd_sort == "" ? "请选择疫苗人群分类" : penging_data.crowd_sort}}</text>
            <image src="/static/other/gengduo.svg"></image>
          </view>
        </picker>
      </view>
    </view>
    <!-- 预约时间 -->
    <view>
      <!-- 医院地址 -->
      <view class="reserve-address">
        <text class="reserve-name">{{timeData.data.Hospital}}</text>
        <text class="reserve-road">{{timeData.data.address}}</text>
        <view class="reserve-title">
          <text v-for="(item,index) in timeData.data.company" :key="index">{{item}}</text>
        </view>
      </view>
      <!-- 星期 -->
      <view class="Week" v-for="(item,index) in timeData.data.week" :key="index">
        <view class="Week-flex" @click="ChooseWeek(item.date)">
          <view class="Week-style Week-sup" :class="penging_data.date == '' ? '' : 'checkstyle'">
            <text>{{item.day}}</text>
            <text>{{item.date}}</text>
            <text>{{item.Have}}</text>
          </view>
        </view>
      </view>
      <!-- 时段 -->
      <view class="period-view" v-for="(item,index) in timeData.data.lasting" :key="index">
        <text class="period-title">{{item.period}}</text>
        <view class="Week-flex">
          <block v-for="(item_a,index_a) in item.time" :key="index_a">
            <view class="Week-style Week-Down" :class="index + '-' + index_a == timeIndex ? 'checkstyle' : ''" 
            @click="ChooseTime(index + '-' + index_a, item.period, item_a.start_time, item_a.end_time, item_a.when)">
              <text>{{item_a.start_time}}-{{item_a.end_time}}</text>
              <text>剩余{{item_a.over}}</text>
            </view>
          </block>
        </view>
      </view>
    </view>
  <!-- 底部按钮 -->
    <view style="height:300rpx"></view>
    <view class="submit">
      <text @click="Cancel">取消</text>
      <text @click="Submit">提交预约</text>
    </view>
  </template>
  
  <script setup lang="ts">
  import {ref,onMounted,reactive,toRefs} from 'vue'
  import {RequestApi} from '@/public/request'
  import {Newapptime} from '@/public/decl-type'
  
  // 请求本页面的数据
  let timeData = reactive<{data:Newapptime}>({
    data:{
      Hospital: "",
      address: "",
      company:[],
      lasting:[],
      week:[]
    }
  })
  onMounted(async()=>{
    const res:any = await RequestApi.NewappTime()
    console.log(res)
    timeData.data = res.data.data[0]
  })
  
  // 待提交的数据
  let SubmitData = reactive({
    penging_data:{
      name:"",
      id_card:"",
      phone:"",
      address:"",
      de_address:"",
      crowd_sort:"",
      date:"",
      period:"",
      reserve_time:"",
      when:0
    }
  })
  let {penging_data} = toRefs(SubmitData)
  
  // 选择省市区
  function changeRegion(event:any){
    let address = ''
    event.detail.value.forEach((item:string)=> address += item + ' ')
    SubmitData.penging_data.address = address
  }
  
  //选择疫苗人群分类
  let selector_data = ref(['医疗卫生人员','卫生系统内工作的其他人员','因公出国人员',
  '对外劳务派遣人员','留学生','因私出国人员','海关边检人员','公安系统,消防人员',
  '党政机关,事业单位人员','社区工作者','教育工作者','小学和中学学生','其他人员'
  ])
  function changeSelector(event:any){
    SubmitData.penging_data.crowd_sort = selector_data.value[event.detail.value]
  }
  
  // 选择星期
  function ChooseWeek(date:string){
    SubmitData.penging_data.date = date
  }
  // 选择时段
  let timeIndex = ref('1')
  function ChooseTime(index:string,period:string,start_time:string,end_time:string,when:number){
    timeIndex.value = index
    SubmitData.penging_data.period = period
    SubmitData.penging_data.reserve_time = start_time + '-' + end_time
    SubmitData.penging_data.when = when
  }
  
  // 取消
  function Cancel(){
    uni.navigateBack({delta: 1})
  }
  
  // 提交
  async function Submit(){
    uni.showLoading({title: '提交中',mask:true})
    const res:any = await RequestApi.RescoVid(SubmitData.penging_data) as {statusCode:200}
    // console.log(res)
    if(res.statusCode == 200){
    uni.hideLoading()
    uni.navigateTo({ url: '/pages/my-serve/xinguan/index' });
    }
  }
  
  
  
  
  
  
  </script>
  
  
  <style>
  /* 表单提交 */
  @import url('../../common-style/form.css');
  page{
    background-color: #f7f7f7;
  }
  /* 预约地址 */
  .reserve-address{
    background-color: #ffffff;
    padding: 20rpx;
    margin: 20rpx;
    border-radius: 10rpx;
  }
  .reserve-address text{
    display: block;
  }
  .reserve-name{
    font-weight: bold;
  }
  .reserve-road{
    padding: 20rpx 0;
  }
  .reserve-title{
    display: flex;
    align-items: center;
  }
  .reserve-title text{
    background-color: #f7f7f7;
    padding: 5rpx 20rpx;
    font-size: 25rpx;
    margin-right: 10rpx;
  }
  .Week{
    background-color: #ffffff;
    padding: 20rpx;
    border-radius: 10rpx;
    margin: 20rpx;
    display: flex;
    align-items: center;
  }
  .Week-flex{
    display: flex;
  }
  .Week-style{
    display: flex;
    flex-direction: column;
    background: #f7f7f7;
    text-align: center;
    padding: 20rpx 0;
    border-radius: 10rpx;
    margin-right: 20rpx;
  }
  .Week-style text{
    padding: 3rpx;
  }
  .Week-sup{
    width: 150rpx;
  }
  .period-view{
    background-color: #ffffff;
    padding: 20rpx;
    border-radius: 10rpx;
    margin: 20rpx;
  }
  .period-title{
    font-weight: bold;
    margin-bottom: 20rpx;
    display: block;
  }
  .Week-Down{
    width: 200rpx;
  }
  /* 选中加上样式 */
  .checkstyle{
    background-color: #2c76ef !important;
    color: #ffffff !important;
  }
  </style>